<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="./vue.js"></script>
    <style>
      .active {
        color: white;
        background-color: black;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <button @click="x++">x:{{x}}</button>
      <hr />
      <button @click="num++">{{price}}</button>
    </div>
  </body>
  <!-- 
    每次数据变化 都要重新生成虚拟DOM 模板中的表达式和方法都会重新执行
   -->
  <script src="https://cdn.bootcdn.net/ajax/libs/axios/1.5.0/axios.min.js"></script>
  <script>
    let app = Vue.createApp({
      data() {
        return {
          x: 100,
          num: 100,
          you: {
            wife: {
              sister: {
                name: "小美",
              },
            },
          },
        };
      },
      // 计算属性  会缓存运算结果 只有依赖的数据发生变化才会重新求值
      computed: {
        // 计算属性:求值函数
        price() {
          console.log("执行price");
          return "￥" + this.num.toFixed(2);
        },
        // 主要作用 对数据进行处理使用
        // 一个数据 没法在模板中直接用
        // 起小名   $store.state.num       num(){return this.$store.state.num}
        xyz() {
          return this.you.wife.sister.name;
        },
      },
      methods: {
        // price() {
        //   console.log("执行price");
        //   return "￥" + this.num.toFixed(2);
        // },
      },
    });

    // mounted  beforeUnmount
    app = app.mount("#app");
  </script>
</html>
